<template>
  <div v-if="package_list.length > 0">
    <ul class="package-list">
      <li v-for="(item, index) in package_list" :key="item.id" v-show="index < min_num">
        <div class="type">
          <h3>{{item.name}}</h3>
          <div class="price" v-show="item.price"><dfn>¥</dfn>{{item.price}}</div>
        </div>
        <div class="num">
          <p class="notice"><span v-show="value[index]" @click="showNotic(index)">预订须知<van-icon class-prefix="ucai-icon" name="arrow_rgt"/></span></p>
            <van-stepper v-if="item.qty_limit_type==1" v-model="value[index]" :min="package_list.length==1 ? item.qty_limit_min : 0" :max="item.qty_limit_max > 0 ? Math.min(item.qty_limit_max,item.stock||99999) : item.stock" integer/> <!--限购-->
            <van-stepper v-else v-model="value[index]" :min="0" :max="item.stock" integer/> <!--不限-->
        </div>
        <!-- 酒店 -->
        <template v-if="product_kind==3">
          <p class="c-warn font-sm" v-if="(formData.skus[index].qty>(item.stock||99999))||item.stock==0 || (multi_package_stock[index]||[]).indexOf(0)>-1">
            <span v-if="$parent.compareDate(package_booking_time[index],formData.skus[index].avail_date)">最早可预订{{package_booking_time[index]}}的酒店</span>
            <span v-else>库存不足</span>
          </p>
        </template>  
        <template v-else>
          <p class="c-warn font-sm" v-if="(formData.skus[index].qty>=(item.stock||99999))||item.stock==0">
            <span v-if="$parent.compareDate(package_booking_time[index],formData.skus[index].avail_date)">最早可预订{{package_booking_time[index]}}的票</span>
            <span v-else>
                库存不足，仅剩{{item.stock}}张,<span v-if="item.qty_limit_min > item.stock && item.stock>0">每次下单数量最小{{item.qty_limit_min}}张</span>
            </span>
          </p>
          <p class="c-warn font-sm" v-else>
             <span v-if="item.qty_limit_max >0 && item.qty_limit_max <= formData.skus[index].qty">每次下单数量最多{{item.qty_limit_max}}张</span>
          </p>
        </template>
        <p class="tips" v-if="item.notes">{{item.notes}}</p>
      </li>
      <li v-if="package_list.length > 3" class="show-more" @click="showMore">{{show_txt}}<van-icon :name="this.isShow ? 'arrow-down': 'arrow-up'" /></li>
    </ul>
    
    <!-- 套餐的须知弹出 -->
		<cate-notic 
			v-if="package_list.length > 0"
			ref="cateNotic" 
			:cate="cate" 
      :showBuyBtn="false"
		/>
    <!-- 弹窗-分享 -->
    <share-overlay :show="shareTips" ref="share-overlay" />
  </div>
</template>

<script>
	import { 
    Icon,
    Stepper,
  } from "vant"
  import CateNotic from '@views/product/components/cate-notic'
  import ShareOverlay from "@cmpt/share"

  export default {
    name: "package-info",
    data(){
        return {
          cate: {},
          shareTips: false, // 分享遮罩
          isShow: true,
          min_num:3, //默认显示3条
          show_txt: '展开全部套餐',
        }
    },

    components:{
      [Icon.name]: Icon,
      [Stepper.name]:Stepper,
      [CateNotic.name]: CateNotic,
      [ShareOverlay.name]: ShareOverlay,
    },

    props: ["package_list","package_booking_time","package_num","formData","multi_package_stock","product_kind"],

    computed: {
      //套餐数量
      value() {
        return this.package_num;
      }
    },

    watch: {
      value(newVal) {
        for(let i = 0, len = newVal.length; i < len; i++) {
          this.$parent.formData.skus[i].qty = newVal[i]; //更新套餐数量
        }
      }
    },

    methods: {
      // 查看套餐的须知
      showNotic(index) {
        this.cate = this.package_list[index]
        this.$refs.cateNotic.init()
      },

      //显示更多
      showMore(){
        this.isShow   = !this.isShow;
        this.min_num  = this.isShow ? 3 : this.package_list.length;
        this.show_txt = this.isShow ? '展开全部套餐': '收起';
      }
    }
  }
</script>

<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
.package-list{
  background: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 16px 0;

  li{
    padding-bottom: 16px;
  }

  h3{
    font-size: 15px;
    font-weight: 400;
  }

  .type{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    line-height: 32px;
  }

  .price{
    color: @color-buy;
    font-size: 18px;
    dfn{
      font-size: 10px;
    }
  }

  .num{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    line-height: 28px;
  }

  .notice{
    color: @color-main;
  }

  .tips{
    margin-top: 10px;
    background: #fffbef;
    color: #999;
    padding: 5px;
    line-height: 21px;
  }
}

.show-more{
  color: @color-main;
  text-align: center;
  padding-bottom: 10px;
  overflow: hidden;
  i{
    margin-right: 2px;
  }
}

</style>
